<template>
    <!-- vue3页面 -->
    
    <div class="tableWrap">
        <el-table :data="tableData" style="width: 100%" border stripe @header-click="headerClick">
            <el-table-column label="合同代码" prop="asset_code"></el-table-column>
            <el-table-column label="合同名称" prop="asset_name"></el-table-column>

            <!-- v-model="searchData[scope.$index].begin_code" -->
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="2">附加基准A</el-radio>
                </template>
                <template #default="scope">
                   <input type="radio" :value="scope.row.asset_01_id"  v-if="scope.row.asset_01_id" :checked="searchData[scope.$index].checked1"  @change="radioChange(scope.row.asset_01_id,scope)" @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope)"  id="syd" /><label for="syd"><i></i> {{scope.row.asset_01_nm}}</label>
                </template>
            </el-table-column>  
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="3">附加基准B</el-radio>
                </template>
                <template #default="scope">
                   <input type="radio"  :value="scope.row.asset_02_id"  v-if="scope.row.asset_02_id" :checked="searchData[scope.$index].checked2"  @change="radioChange(scope.row.asset_02_id,scope)" @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope)"  id="syd"/><label for="syd"><i></i> {{scope.row.asset_02_nm}}</label>
                   <!-- <input type="radio"  :value="scope.row.asset_02_id"  v-if="scope.row.asset_02_id" :checked="searchData[scope.$index].checked2"  @change="radioChange(scope,scope.$index,$event,searchData[scope.$index].begin_code)"  @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope,$event)" />{{scope.row.asset_02_nm}} -->
                   <!-- <input type="radio" v-model="searchData[scope.$index].begin_code" :value="scope.row.asset_02_id" :label="scope.row.asset_02_id" v-if="scope.row.asset_02_id" :checked="searchData[scope.$index].checked"  @change="radioChange(scope,scope.$index,$event,searchData[scope.$index].begin_code)"  @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope,$event)" />{{scope.row.asset_02_nm}} -->

                   <!-- <el-radio v-model="searchData[scope.$index].begin_code" :label="scope.row.asset_02_id" v-if="scope.row.asset_02_id"  @change="radioChange(scope,scope.$index)">{{scope.row.asset_02_nm}}</el-radio> -->
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="4">附加基准C</el-radio>
                </template>
                <template #default="scope">
                   <input type="radio" :value="scope.row.asset_03_id"  v-if="scope.row.asset_03_id" :checked="searchData[scope.$index].checked3"  @change="radioChange(scope.row.asset_03_id,scope)" @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope)"  id="syd"/><label for="syd"><i></i> {{scope.row.asset_03_nm}}</label>
                   <!-- <input type="radio" :value="scope.row.asset_03_id"  v-if="scope.row.asset_03_id" :checked="searchData[scope.$index].checked3"  @change="radioChange(scope,scope.$index,$event,searchData[scope.$index].begin_code)"  @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope,$event)" />{{scope.row.asset_03_nm}} -->
                   <!-- <input type="radio" v-model="searchData[scope.$index].begin_code" :value="scope.row.asset_03_id" :label="scope.row.asset_03_id" v-if="scope.row.asset_03_id" :checked="searchData[scope.$index].checked"  @change="radioChange(scope,scope.$index,$event,searchData[scope.$index].begin_code)"  @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope,$event)" />{{scope.row.asset_03_nm}} -->

                   <!-- <el-radio v-model="searchData[scope.$index].begin_code" :label="scope.row.asset_03_id" v-if="scope.row.asset_03_id"  @change="radioChange(scope,scope.$index)">{{scope.row.asset_03_nm}}</el-radio> -->
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="5">附加基准D</el-radio>
                </template>
                <template #default="scope">
                   <!-- <input type="radio" v-model="searchData[scope.$index].begin_code" :value="scope.row.asset_04_id" :label="scope.row.asset_04_id" v-if="scope.row.asset_04_id" :checked="searchData[scope.$index].checked"  @change="radioChange(scope,scope.$index,$event,searchData[scope.$index].begin_code)"  @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope,$event)" />{{scope.row.asset_04_nm}} -->
                   <input type="radio"  :value="scope.row.asset_04_id" v-if="scope.row.asset_04_id" :checked="searchData[scope.$index].checked4"  @change="radioChange(scope.row.asset_04_id,scope)" @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope)"  id="syd"/><label for="syd"><i></i> {{scope.row.asset_04_nm}}</label>

                   <!-- <el-radio v-model="searchData[scope.$index].begin_code" :label="scope.row.asset_04_id" v-if="scope.row.asset_04_id"  @change="radioChange(scope,scope.$index)">{{scope.row.asset_04_nm}}</el-radio> -->
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="6">自定义</el-radio>
                </template>
                <template #default="scope" >
                   <!-- <input type="radio" v-model="searchData[scope.$index].begin_code" :value="scope.row.asset_05_id" :label="scope.row.asset_05_id" v-if="scope.row.asset_05_id" :checked="searchData[scope.$index].checked"  @change="radioChange(scope,scope.$index,$event,searchData[scope.$index].begin_code)"  @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope,$event)" /> -->
                   <input type="radio"  :value="scope.row.asset_05_id" v-if="scope.row.asset_05_id" :checked="searchData[scope.$index].checked5"  @change="radioChange(scope.row.asset_05_id,scope)" @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope)"  id="syd"/><label for="syd"><i></i></label>

                   <!-- <el-radio v-model="searchData[scope.$index].begin_code" :label="scope.row.asset_05_id" > -->
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                   <!-- </el-radio> -->
                </template>
            </el-table-column>  

            <el-table-column label="操作">
            <template #default="scope">
                <el-button  size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
            </el-table-column>
        </el-table>
        
    </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
export default defineComponent({
    name: 'App',
    setup() {
        const tableData:any =[
            {
                asset_name:'第一条',
                asset_code:'001',
                asset_01_id:'000001',
                asset_01_nm:'这是第一条第一列数据内容',
                asset_02_id:'000002',
                asset_02_nm:'这是第一条第二列数据内容',
                asset_03_id:'000003',
                asset_03_nm:'这是第一条第三列数据内容',
                asset_04_id:'000004',
                asset_04_nm:'这是第一条第四列数据内容',
                begin_date:'2022-2-1'
            },
            {
                asset_name:'第二条',
                asset_code:'002',
                asset_01_id:null,
                asset_01_nm:null,
                asset_02_id:'000022',
                asset_02_nm:'这是第二条第二列数据内容',
                asset_03_id:null,
                asset_03_nm:null,
                asset_04_id:'000024',
                asset_04_nm:'这是第二条第四列数据内容',
                begin_date:'2022-2-2'
            },
            {
                asset_name:'第三条',
                asset_code:'003',
                asset_01_id:null,
                asset_01_nm:null,
                asset_02_id:null,
                asset_02_nm:null,
                asset_03_id:null,
                asset_03_nm:null,
                asset_04_id:null,
                asset_04_nm:null,
                begin_date:'2022-2-3'
            },
            {
                asset_name:'第四条',
                asset_code:'004',
                asset_01_id:'000041',
                asset_01_nm:'这是第四条第一列数据内容',
                asset_02_id:null,
                asset_02_nm:null,
                asset_03_id:'000043',
                asset_03_nm:'这是第四条第三列数据内容',
                asset_04_id:null,
                asset_04_nm:null,
                begin_date:'2022-2-4'
            },
        ]
        const radioList = reactive({
            headerRadio:'2',
            asset_01:'',
            asset_02:'',
            asset_03:'',
            asset_04:'',
            asset_05:'',
        })
        const searchData:any =reactive([
            {
                asset_name:'',
                asset_code:'',
                begin_code:'' as any,
                begin_date:'',
                checked1:true,
                checked2:false,
                checked3:false,
                checked4:false,
                checked5:false,
            }
        ])
        let radioChecked = ref(false)
        const radioChange =(e:any,scope:any)=>{
            console.log(e,'eeeeee',scope)
            let checked = 'checked'+(scope.cellIndex-1)
           
            console.log(checked,'checked')
            for(let i =0;i<searchData.length;i++){
                
                if(searchData[i].asset_code == scope.row.asset_code){
                    searchData[i].checked1 = false;
                    searchData[i].checked2 = false;
                    searchData[i].checked3 = false;
                    searchData[i].checked4 = false;
                    searchData[i].checked5 = false;
                    searchData[i].begin_code = e
                    searchData[i][checked]=true
                }
                
            }
            console.log(searchData,'searchdata')
            
        }
        // const radioChange =(scope:any,index:any,event:any,val:any)=>{
        //     console.log(scope,index)
        //     // console.log(searchData,'search')
        //     //判断当前切换后的列与表头的列是否一致 不一致的话 要取消表头的勾选 
        //     // 还要判断如果 要是切换的时候 每一列都绑的同一列ID 还要把表头列勾上 未实现
        //     if(radioList.headerRadio !== scope.cellIndex){
        //         radioList.headerRadio =''
        //     }
        //     console.log(val,'vallll')

        //     // searchData[index].begin_code = scope
        //     // console.log(radioList.headerRadio,'当前选择的列')
        // }

        //点击取消勾选 
        const radioClick =(val:any,index:number,scope:any)=>{
            let checked = 'checked'+(scope.cellIndex-1)

            for(let i =0;i<searchData.length;i++){
                
                if(searchData[i].asset_code == scope.row.asset_code){
                    searchData[i].checked1 = false;
                    searchData[i].checked2 = false;
                    searchData[i].checked3 = false;
                    searchData[i].checked4 = false;
                    searchData[i].checked5 = false;
                    searchData[i].begin_code = null
                }
                
            }

            console.log(val,'vallll',index,'index')
           

            console.log(searchData,'search')

        }

        const handleEdit =(index:any,row:any)=>{
            console.log(index,row)
        }
        const handleDelete =(index:any,row:any)=>{
            console.log(index,row)
        }
        const headerClick =(column:any,row:any)=>{
            console.log(column.no,'nono')
            console.log(radioList,searchData,'syd')

            let ss = "asset_0"+ (column.no -1)+ '_id';
            let checked = 'checked'+(column.no -1)
            console.log(ss,'ssss')

            

            for(let i =0;i<searchData.length;i++){
                searchData[i].checked1 = false;
                searchData[i].checked2 = false;
                searchData[i].checked3 = false;
                searchData[i].checked4 = false;
                searchData[i].checked5 = false;
                searchData[i].begin_code = tableData[i][ss]
                searchData[i][checked] = true

            }

            console.log(radioList,searchData,'syd')
        }
        onMounted(()=>{
            let dataLength = tableData.length;
            for(let z =0;z<dataLength-1;z++){
                searchData.push(
                    {
                        asset_name:'',
                        asset_code:'',
                        begin_code:'' as any,
                        begin_date:'',
                        checked1:true,
                        checked2:false,
                        checked3:false,
                        checked4:false,
                        checked5:false
                    }
                )
                
            }
            
            for(let i =0;i<tableData.length;i++){
                tableData[i].asset_05_id ='zidingyi'
                searchData[i].asset_name = tableData[i].asset_name
                searchData[i].asset_code = tableData[i].asset_code
                searchData[i].begin_code = tableData[i].asset_01_id
                searchData[i].begin_date = tableData[i].begin_date
            }

            console.log(searchData,'search',tableData,'table')
        })
        return {
            ...toRefs(radioList),
            searchData,
            tableData,
            radioChange,
            handleDelete,
            handleEdit,
            radioClick,
            radioChecked,
            headerClick
        }
    }
})
</script>

<style scoped>
    .tableWrap input[type="checkbox"],
    .tableWrap input[type="radio"] {
        display: none;
        /* 隐藏原生的多选框 */
    }


    .tableWrap input[type="radio"]+label>i {
        /* 左侧选框的样式 */
        position: relative;
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 1px solid #eaeaea;
        background: transparent;
        margin-right: 10px;
        vertical-align: middle;
        border-radius: 3px;
        top: -2px;
        box-sizing: border-box;
    }

    .tableWrap input[type="radio"]+label>i {
        border-radius: 50%;
    }


    .tableWrap input[type="radio"]+label {
        /* hover样式 */
        cursor: pointer;
    }


    .tableWrap input[type="radio"]:checked+label {
        /* 选中之后label的颜色 */
        color: #9c3939;
    }


    .tableWrap input[type="radio"]:checked+label>i {
        /* 选中之后选框的样式 */
        border: 1px solid #9c3939;
    }



    .tableWrap input[type="radio"]:checked+label>i::before {
        /* 选中之后选框内圆点的样式 */
        width: 7px;
        height: 7px;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: #9c3939;
        border-radius: 50%;
    }
</style>